<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			.nearsite-message{
				display: inline-block;
			    clear:both;
			    margin: 10px;
			}
			.nearsite-message .avatar{
				float: left;
			}
			.nearsite-message .avatar img{
			    width: 30px;
			    height: 30px;
			    border-radius: 50%;
			}
			.nearsite-message .content{
				float: left; 
			    background: #fff;
				margin: 0 10px 10px 10px;
			    padding: 10px;
			    border-radius:7px;
			    max-width: 90%;
			    position: relative;
			    min-height: 20px;
			    font-size:15px;
			}
			.nearsite-message .content img{
				width: 100%;
			}
			.nearsite-message .triangle{
				height:0px; 
			    width:0px; 
			    border-width:8px; 
			    border-style:solid;
			    position: absolute;
			    top:6px; 
			    border-color:transparent #fff transparent transparent;    
			    left:-16px;
			}
			.vertbar{
				width: 1px;
				height: 50px;
				background-color: #a2a2a2;
				margin: -34px 25px -8px;
			}
		</style>
	</head>
	<body>
		<div class="mui-content">
			
			<div class='nearsite-message'>
				<div class='avatar'>
					<img src="img/site.png" />
				</div>
				<div class='content'>
					<div class='triangle'></div>
					<span>北京市海淀区</span>
				</div>
			</div>
			
			<div class="vertbar"></div>
			
			<div class='nearsite-message'>
				<div class='avatar'>
					<img src="img/site.png" />
				</div>
				<div class='content'>
					<div class='triangle'></div>
					<span>北京市海淀区</span>
				</div>
			</div>
			
			<div class="vertbar"></div>
			
			<div class='nearsite-message'>
				<div class='avatar'>
					<img src="img/site.png" />
				</div>
				<div class='content'>
					<div class='triangle'></div>
					<span>北京市海淀区</span>
				</div>
			</div>
			
			<div class="vertbar"></div>
			
			<div class='nearsite-message'>
				<div class='avatar'>
					<img src="img/site.png" />
				</div>
				<div class='content'>
					<div class='triangle'></div>
					<span>北京市海淀区</span>
				</div>
			</div>
			
			<div class="vertbar"></div>
			
			<div class='nearsite-message'>
				<div class='avatar'>
					<img src="img/site.png" />
				</div>
				<div class='content'>
					<div class='triangle'></div>
					<span>北京市海淀区</span>
				</div>
			</div>				
		</div>
	</body>
</html>
